<template>
  <div>
    <el-row>
      <el-col :span="24">
          <el-form
            label-position="left"
            label-width="100px"
            :model="form"
          >
            <el-form-item  label="腾讯视频路径">
              <el-input
                v-model="txUrl"
                clearable
                style="width: 75%; margin-right: 10px"
              />
              <el-button
                :loading="txLoading"
                @click="getInfoByTxUrl()"
                type="primary"
                icon="el-icon-search"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item
              v-if="txResource.length > 0"
              prop="definition"
              label="清晰度"
            >
              <el-radio
                v-for="item in txResource"
                :key="item.id"
                v-model="checkedTxResource"
                :label="item.url"
                >{{ item.definitionDesc }}</el-radio
              >
            </el-form-item>
          </el-form>
      </el-col>
      <el-col :span="24">
        <Player v-if="checkedTxResource!=null" :url="checkedTxResource"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getInfoByTxUrl } from "@/api/video/info";
import Player from "../video/player";
export default {
  name: "Dashboard",
  components: {
    Player,
  },
  data() {
    return {
      txResource: [],
      checkedTxResource: null,
      form: {},
      txUrl: '',
      txLoading: false
    };
  },
  methods: {
    getInfoByTxUrl() {
      this.txLoading = true;
      getInfoByTxUrl(1, this.txUrl)
        .then((v) => {
          this.txResource = v.data;
          this.checkedTxResource = [];
          // this.checkedTxResource.push(this.txResource[0]);
          this.$message({
            message: "获取资源成功",
            type: "success",
          });
          this.txLoading = false;
        })
        .catch(() => {
          this.$message({
            message: "获取资源失败：请检查地址是否正确，或联系管理员",
            type: "error",
          });
          this.txLoading = false;
        });
    },
  },
};
</script>

<style>
</style>